<template>
  <div class="retrieve-record">
    <el-table
      :data="listData"
      cell-class-name="custom-row"
      header-row-class-name="custom-row"
      header-cell-class-name="custom-header"
      :empty-text="loading ? '数据加载中' : '暂无数据'"
    >
      <el-table-column label="发送时间"  min-width="100">
        <template v-slot="scope">{{ $dayjs.unix(scope.row.send_at).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
              label="标题"
              prop="title"
      ></el-table-column>
      <el-table-column
              label="内容"
              prop="content"
              min-width="100"
      ></el-table-column>
      <el-table-column label="附件" align="center"  min-width="300">
        <template v-slot="scope">
          <div v-if="scope.row.attachments">
            <div class="d-flex align-center justify-center" v-for="(item,index) in scope.row.attachments">
              <img :src="item.extend.image_url" style="width: 100px" v-if="item.extend" />
              <div v-if="item.extend">
                {{item.extend.item_name}}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="200">
        <template v-slot="scope">
          <div style="margin-bottom: 10px">
            <el-button size="medium" type="primary" v-if="scope.row.attachments && scope.row.attachments.length > 0 && !scope.row.is_receive"
                       @click="receiveAward(scope.row.id)"
            >领取</el-button>
          </div>
          <div>
            <el-popconfirm
                    width="220"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    icon-color="#626AEF"
                    title="确定要执行该操作吗?"
                    @confirm="delAward(scope.row.id)"
            >
              <template #reference>
                <el-button size="medium" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <v-spacer></v-spacer>
    <div class="pagination-wrapper mt-3 pb-3">
      <el-pagination
        v-model:page-size="query.page_size"
        :total="total"
        v-model:current-page="query.page"
        @current-change="fetch"
        hide-on-single-page
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { UserService } from "@/services/UserService";
import { UserRetrievRecord } from "@/types";
import { defineComponent, reactive, ref } from "vue";
import {ElMessage} from "element-plus";

export default defineComponent({
  setup() {
    const listData: UserRetrievRecord[] = [];
    return {
      query: reactive({
        page: 1,
        page_size: 10,
      }),
      listData: ref(listData),
      total: ref(0),
      loading: ref(false),
    };
  },

  methods: {
    fetch() {
      if (this.loading) return;
      this.loading = true;
      return UserService.messageList(this.query)
        .then((res) => {
          const { list, total } = res.data.data;
          this.listData = list;
          this.listData.forEach(x =>{
            if(x.attachments && x.attachments.length > 0){
              x.attachments.forEach(y =>{
                if(y.extend){
                  y.extend = JSON.parse(y.extend)
                }
              })
            }
          })
          this.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    receiveAward(id){
      return UserService.receiveAttachments({
        id
      }).then(res =>{
        if(res.data.code == 0){
          ElMessage.success("领取成功！！！");
          this.fetch();
        }
      })
    },
    delAward(id){
      return UserService.delRecord({
        id
      }).then(res =>{
        if(res.data.code == 0){
          ElMessage.success("删除成功！！！");
          this.fetch();
        }
      })
    },
    readAll(){
      return UserService.batchRead().then(res =>{
        this.fetch();
      })
    },
  },
  created() {
    this.readAll()
  },
});
</script>

<style lang="scss">
.retrieve-record {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  height: 100%;

  > * {
    flex: none;
  }

  .pagination-wrapper {
    text-align: center;
  }
}
</style>
